<template>
	<view class="">
		<!-- 猪小妹餐厅订单 -->
		<view class="message-restaurant">
			<!-- 标题 -->
			<view class="message-title">
				<image class="message-title-image" src="../../static/images/index/rice.png"></image>
				<text style="font-weight: bold;">猪小妹餐厅订单</text>
			</view>
			<!-- 头部 -->
			<view class="message-top">
				<!-- 已下单 -->
				<view class="ordered">
					<uni-badge :text="orderedCount" absolute="rightTop" size="normal">
						<button  @click="clickOrdered">
							<image src="../../static/images/message/ordered.png"></image><view>已下单</view>
						</button>
					</uni-badge>
					
				</view>
				<!-- 已接单 -->
				<view class="received">
					<uni-badge :text="receivedCount" absolute="rightTop" size="normal" type="warning">
						<button  @click="clickReceived">
							<image src="../../static/images/message/received.png"></image><view>已接单</view>
						</button>
					</uni-badge>
				</view>
				<!-- 已完成 -->
				<view class="completed">
					<button  @click="clickCompleted">
						<image src="../../static/images/message/completed.png"></image><view>已完成</view>
					</button>
				</view>
			</view>
		</view>
		<!-- 分割线 -->
		<view class="line-between"></view>
		
		
	</view>
</template>

<script setup>
	import { ref } from "vue";
	import { onShow } from '@dcloudio/uni-app';
	import { apiRestaurantOrdersByStatus, apiRestaurantOrdersCountByStatus } from "../../utils/apiRestaurant";
	
	
	//-------------------------------onShow------------------------------------------
	//已下单个数
	const orderedCount = ref(null);
	//已接单个数
	const receivedCount = ref(null);
	onShow(() => {
		// console.log("1");
		apiRestaurantOrdersCountByStatus(1).then((res) => {
			// console.log(res);
			orderedCount.value = res;
		});
		apiRestaurantOrdersCountByStatus(2).then((res) => {
			// console.log(res);
			receivedCount.value = res;
		})
	})
	//------------------------------点击事件------------------------------------------
	//点击已下单
	const clickOrdered = () => {
		// console.log("下单");
		uni.navigateTo({
			url:'/pages/message/restaurant_message/restaurant-ordered'
		})
	}
	//点击已接单
	const clickReceived = () => {
		// console.log("接单");
		uni.navigateTo({
			url:'/pages/message/restaurant_message/restaurant-received'
		})
	}
	//点击已完成
	const clickCompleted = () => {
		// console.log("已完成");
		uni.navigateTo({
			url:'/pages/message/restaurant_message/restaurant-completed'
		})
	}
</script>

<style lang="scss" scoped>
	.message-restaurant{
		.message-title{
			display: flex;
			align-items: center;
			padding: 10rpx 20rpx;
			padding-bottom: 20rpx;
			.message-title-image{
				margin-right: 20rpx;
				width: 50rpx;
				height: 50rpx;
			}
		}
		.message-top{
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 10px;
			.ordered, .received, .completed{
				button{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 80px;
					height: 80px;
					border-radius: 10px;
					font-size: 14px;
					image{
						width: 40px;
						height: 40px;
					}
				}
			}
		}
	}
	.line-between{
		border-bottom: 1px solid #e5e5e5;
	}
</style>
